<template>
  <div class="main">
    <div class="header-card">
      <div class="uc-header">
        <div class="back" @click="$router.back()">
          <img src="@/assets/img/3.png" />
        </div>
        <div class="title">{{ $t("SetPassword") }}</div>
      </div>
    </div>
    <div class="cont">
      <div class="img1"></div>
      <div class="frombox">
        <div class="fb-item">
          <div class="fb-lable">{{ $t("CurrentLoginPassword") }}</div>
          <div :class="['fb-inputbox', { active: input0_active }]">
            <div class="iconbox">
              <img src="@/assets/img/lock.png" />
            </div>
            <input
              @input="inputValueChange"
              @focus="input0_active = true"
              @blur="pwdBlur(currentPassword)"
              v-model="currentPassword"
              type="password"
              :placeholder="$t('currentPasswordPlaceholder')"
            />
          </div>
        </div>
        <div class="fb-item">
          <div class="fb-lable">{{ $t("NewLoginPassword") }}</div>
          <div :class="['fb-inputbox', { active: input1_active }]">
            <div class="iconbox">
              <img src="@/assets/img/lock.png" />
            </div>
            <input
              @input="inputValueChange"
              @focus="input1_active = true"
              @blur="pwdBlur(password)"
              v-model="password"
              type="password"
              :placeholder="$t('MasukkanKataSandi')"
            />
          </div>
        </div>
        <div class="fb-item">
          <div class="fb-lable">{{ $t("NewPasswordAgain") }}</div>
          <div :class="['fb-inputbox', { active: input2_active }]">
            <div class="iconbox">
              <img src="@/assets/img/lock.png" />
            </div>
            <input
              @input="inputValueChange"
              @focus="input2_active = true"
              @blur="pwdBlur(newPassword)"
              type="password"
              v-model="newPassword"
              :placeholder="$t('newPasswordPlaceholder')"
            />
          </div>
        </div>
        <div class="fb-item">
          <div class="fb-lable">{{ $t("GetVerificationCode") }}</div>
          <div class="getCodebox">
            <div :class="['fb-inputbox', { active: input3_active }]">
              <div class="iconbox">
                <img src="@/assets/img/bancein.png" />
              </div>
              <input
                @input="inputValueChange"
                @focus="input3_active = true"
                @blur="input3_active = false"
                type="text"
                v-model="code"
                :placeholder="$t('Code')"
                @keyup="code = code.replace(/[^\d]/g, '')"
                @afterpaste="code = code.replace(/[^\d]/g, '')"
              />
            </div>
            <div class="getcodebtn" @click="sendSMS">
              <template v-if="!time">{{ $t("Get") }}</template>
              <template v-if="time">{{ time }}{{ $t("s") }}</template>
            </div>
          </div>
        </div>
      </div>
      <div :class="['query-btn', { disabled: disabled }]" @click="comfirm">
        {{ $t("Confirm") }}
      </div>
    </div>
  </div>
</template>

<script>
import { httpChangePassword, httpSmsSend, httpEmailSend } from "@/http/api";
import { phoneGetCodeNum, phoneSetCodeNum } from "@/utils/common";
export default {
  name: "SetPassword",
  data() {
    return {
      input0_active: false,
      input1_active: false,
      input2_active: false,
      input3_active: false,
      currentPassword: "",
      password: "",
      newPassword: "",
      code: "",
      time: 0,
      setAjax: false,

      disabled: true,
    };
  },

  methods: {
    inputValueChange() {
      if (this.password.trim() && this.code.trim()) this.disabled = false;
      else this.disabled = true;
    },
    // 失焦
    pwdBlur(pwd) {
      this.input0_active = false;
      this.input1_active = false;
      this.input2_active = false;
      if (pwd.length < 8 || pwd.length > 16) {
        return this.$Toast.fail(this.$t("passwordVertical"));
      }
    },
    // 发送验证码
    async sendSMS() {
      if (this.time) return;
      let mobile = localStorage.getItem("mobile");
      let email = localStorage.getItem("email");
      let areaCode = localStorage.getItem("areaCode");
      if (!mobile && !email) return this.$Toast(this.$t("phoneVertical"));

      if (mobile) {
        let num = phoneGetCodeNum("setPassword", mobile);
        if (num >= 3 && num < 5) {
          this.$Toast(`该号码还能发送${5 - num}次`);
        } else if (num > 4) {
          return this.$Toast(`发送短信已达上限`);
        }
      }

      this.time = 60;
      let timer = setInterval(() => {
        this.time -= 1;
        if (this.time <= 0) {
          this.time = 0;
          clearInterval(timer);
        }
      }, 1000);
      let res;
      if (mobile) {
        let params = {
          mobile_area_code: areaCode,
          mobile,
          code_type: "change_password",
          timestamp: Math.floor(Date.now() / 1000),
        };
        res = await httpSmsSend(params);
      } else {
        let params = { email, code_type: "change_password" };
        res = await httpEmailSend(params);
      }
      if (res.code == 0) {
        this.$Toast.success(this.$t("Success"));
        phoneSetCodeNum("setPassword", mobile);
      } else {
        this.time = 0;
        clearInterval(timer);
        this.$Toast(res.msg);
      }
    },
    // 确认
    async comfirm() {
      if (this.disabled) return;
      if (this.setAjax) return;
      if (!this.password.trim())
        return this.$Toast.fail(this.$t("SetPassword"));
      if (this.password.length < 8 || this.password.length > 16) {
        return this.$Toast.fail(this.$t("passwordVertical"));
      }
      if (!this.newPassword.trim())
        return this.$Toast.fail(this.$t("SetPasswordAgain"));
      if (this.password.trim() != this.newPassword.trim())
        return this.$Toast.fail(this.$t("PasswordsAreInconsistent"));
      if (!this.code.trim())
        return this.$Toast.fail(this.$t("GetVerificationCode"));
      let params = {
        current_password: this.currentPassword,
        new_password: this.password,
        again_password: this.password,
        code: Number(this.code),
      };
      this.setAjax = true;

      let res = await httpChangePassword(params);
      if (res.code == 0) {
        this.$Toast.success(this.$t("SetSucceeded"));
        this.$router.back();
      }
      this.setAjax = false;
    },
  },
};
</script>

<style lang="less" scoped>
@import url("./ucenter-common.less");

.main {
  .header-card {
    width: 750px;
    height: 215px;
    // background: url("~@/assets/img/ucheader2.png") center/750px 215px;
    background-color: #000000;

    .uc-header {
      padding-top: 60px;
    }
  }

  .cont {
    width: 100%;
    // background: #fff;
    background-color: #000000;
    position: relative;
    top: -60px;
    border-radius: 60px;
    padding: 92px 66px;

    .img1 {
      width: 128px;
      height: 128px;
      background: url("~@/assets/img/SetPassword.png") center/128px 128px;
      margin: auto;
      margin-bottom: 76px;
    }

    .getcodebtn {
      width: 300px !important;
      background: url("~@/assets/img/19.png") center/100% 100% no-repeat;
      color: #fff;
      &.active {
        background: rgb(72, 113, 248);
        color: #fff;
      }
    }

    .query-btn {
      width: 618px;
      height: 93px;
      opacity: 1;
      /** background: linear-gradient(178.44deg,
          rgba(238, 220, 201, 1) 0%,
          rgba(220, 188, 155, 1) 100%);
      box-shadow: 1px 7px 8px 0px rgba(201, 173, 144, 0.51);**/
      background: url("~@/assets/img/19.png") center/100% 100% no-repeat;
      font-size: 28px;
      letter-spacing: 0px;
      color: rgba(255, 255, 255, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      user-select: none;
      margin-top: 108px;
      border-radius: 20px;
      transition: all 0.15s;

      &:active {
        box-shadow: 1px 3px 4px 0px rgba(201, 173, 144, 0.51);
        transform: translateY(2px);
      }

      &.disabled {
        background: #dfe6fc;
        box-shadow: 1px 7px 8px 0px rgba(201, 173, 144, 0);
        color: #ccc;
      }
    }
  }
}
</style>
